<!-- src/views/CommunityDetailView.vue -->
<template>
  <div id="app">
    <AppNavbar />

    <div class="detail-container">
      <!-- 帖子详情 -->
      <div class="post-detail">
        <!-- 发布者信息 -->
        <div class="post-author">
          <img
            :src="postDetail.avatarPath"
            :alt="postDetail.nickname"
            class="author-avatar"
            @error="handleImageError"
          />
          <div class="author-info">
            <span class="author-name">{{ postDetail.nickname }}</span>
            <span class="post-time">{{ formatUpdateTime(postDetail.updateTime) }}</span>
          </div>
        </div>

        <!-- 帖子内容 -->
        <div class="post-content">
          <div class="post-header">
            <span class="post-category">{{ postDetail.categoryName }}</span>
            <h1 class="post-title">{{ postDetail.title }}</h1>
          </div>

          <div class="post-text">
            {{ postDetail.content }}
          </div>

          <!-- 附件图片 -->
          <div v-if="postDetail.attachmentPathList && postDetail.attachmentPathList.length > 0" class="attachments">
            <div
              v-for="(attachment, index) in postDetail.attachmentPathList"
              :key="index"
              class="attachment-item"
            >
              <img
                :src="attachment"
                :alt="`附件${index+1}`"
                class="attachment-image"
                @error="handleImageError"
              />
            </div>
          </div>
        </div>

        <!-- 帖子互动 -->
        <div class="post-interactions">
          <div class="interaction-item like"
               :class="{ active: postDetail.reactionType === 'like' }"
               @click="handleLike">
            <i class="iconfont icon-like"></i>
            <span>{{ postDetail.likeCount }}</span>
          </div>

          <div class="interaction-item dislike"
               :class="{ active: postDetail.reactionType === 'dislike' }"
               @click="handleDislike">
            <i class="iconfont icon-dislike"></i>
          </div>

          <div class="interaction-item comment" @click="replyToPost">
            <i class="iconfont icon-pinglun"></i>
            <span>{{ postDetail.replyCount }}</span>
          </div>

          <div class="interaction-item favorite"
               :class="{ active: postDetail.isFavourite }"
               @click="handleFavorite">
            <i class="iconfont icon-shoucang_2"></i>
            <span>{{ postDetail.favouriteCount }}</span>
          </div>
        </div>
      </div>

      <!-- 回复列表 -->
      <div
        class="reply-list"
        ref="replyListContainer"
        @scroll="handleScroll"
      >
        <div
          v-for="reply in replyList"
          :key="reply.replyId"
          class="reply-item"
        >
          <!-- 回复者信息 -->
          <div class="reply-author">
            <img
              :src="reply.avatarPath"
              :alt="reply.nickname"
              class="author-avatar"
              @error="handleImageError"
            />
            <div class="author-info">
              <span class="author-name">{{ reply.nickname }}</span>
              <span class="reply-time">{{ formatUpdateTime(reply.createTime) }}</span>
            </div>
          </div>

          <!-- 回复内容 -->
          <div class="reply-content">
            <span v-if="reply.replyUserId" class="reply-to">
              @{{ reply.replyNickname }}
            </span>
            {{ reply.content }}
          </div>

          <!-- 回复的回复列表 -->
          <div v-if="reply.subReplies && reply.subReplies.length > 0" class="sub-replies">
            <div
              v-for="subReply in reply.subReplies"
              :key="subReply.replyId"
              class="sub-reply-item"
            >
              <div class="reply-author">
                <img
                  :src="subReply.avatarPath"
                  :alt="subReply.nickname"
                  class="author-avatar small"
                  @error="handleImageError"
                />
                <div class="author-info">
                  <span class="author-name">{{ subReply.nickname }}</span>
                  <span class="reply-time">{{ formatUpdateTime(subReply.createTime) }}</span>
                </div>
              </div>

              <div class="reply-content">
                <span v-if="subReply.replyUserId" class="reply-to">
                  @{{ subReply.replyNickname }}
                </span>
                {{ subReply.content }}
              </div>

              <!-- 子回复互动 -->
              <div class="reply-interactions">
                <div class="interaction-item like"
                     :class="{ active: subReply.reactionType === 'like' }"
                     @click="handleSubReplyLike(subReply)">
                  <i class="iconfont icon-like"></i>
                  <span>{{ subReply.likeCount }}</span>
                </div>

                <div class="interaction-item dislike"
                     :class="{ active: subReply.reactionType === 'dislike' }"
                     @click="handleSubReplyDislike(subReply)">
                  <i class="iconfont icon-dislike"></i>
                </div>

                <div class="interaction-item comment" @click="replyToSubReply(reply, subReply)">
                  <i class="iconfont icon-pinglun"></i>
              </div>
              </div>
            </div>

            <!-- 查看更多子回复 -->
            <div
              v-if="reply.subReplies.length < reply.replyCount"
              class="load-more-sub-replies"
              @click="loadMoreSubReplies(reply)"
            >
              查看更多回复
            </div>
          </div>

          <!-- 回复互动 -->
          <div class="reply-interactions">
            <div class="interaction-item like"
                 :class="{ active: reply.reactionType === 'like' }"
                 @click="handleReplyLike(reply)">
              <i class="iconfont icon-like"></i>
              <span>{{ reply.likeCount }}</span>
            </div>

            <div class="interaction-item dislike"
                 :class="{ active: reply.reactionType === 'dislike' }"
                 @click="handleReplyDislike(reply)">
              <i class="iconfont icon-dislike"></i>
            </div>

            <div class="interaction-item comment" @click="replyToReply(reply)">
              <i class="iconfont icon-pinglun"></i>
              <span>{{ reply.replyCount }}</span>
            </div>
          </div>
        </div>

        <!-- 加载更多提示 -->
        <div v-if="loadingMore" class="loading-more">
          加载中...
        </div>

        <div v-if="replyList.length === 0 && !loadingMore" class="empty-state">
          <p>暂无回复</p>
        </div>

        <div v-if="noMoreData && replyList.length > 0" class="no-more-data">
          没有更多回复了
        </div>
      </div>

      <!-- 回复目标显示 -->
      <div v-if="currentReplyTarget.type" class="reply-target-info">
        <span v-if="currentReplyTarget.type === 'post'">回复帖子：</span>
        <span v-else-if="currentReplyTarget.type === 'reply'">回复 {{ currentReplyTarget.parentNickname }}：</span>
        <span v-else-if="currentReplyTarget.type === 'subReply'">回复 {{ currentReplyTarget.targetNickname }}：</span>
        <button class="cancel-reply" @click="cancelReply">取消</button>
      </div>

      <!-- 回复输入框 -->
      <div class="reply-input-container">
        <textarea
          v-model="replyContent"
          placeholder="请输入回复内容"
          class="reply-input"
        ></textarea>
        <div class="reply-actions">
          <button
            class="reply-btn"
            @click="submitReply"
            :disabled="!replyContent.trim()"
          >
            回复
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import AppNavbar from '../components/AppNavbar.vue'
import apiClient from '../utils/api.js'

export default {
  name: 'CommunityDetailView',
  components: {
    AppNavbar
  },
  props: {
    postId: {
      type: [String, Number],
      required: true
    }
  },
  setup (props) {
    const postDetail = ref({
      postId: 0,
      userId: 0,
      nickname: '',
      avatarPath: '',
      categoryId: 0,
      categoryName: '',
      title: '',
      content: '',
      attachmentPathList: [],
      reactionType: null,
      isFavourite: false,
      likeCount: 0,
      favouriteCount: 0,
      replyCount: 0,
      createTime: '',
      updateTime: ''
    })

    const replyList = ref([])
    const replyContent = ref('')
    const replyListContainer = ref(null)
    const loadingMore = ref(false)
    const noMoreData = ref(false)

    // 存储当前回复的目标信息
    const currentReplyTarget = ref({
      type: '', // 'post', 'reply', 'subReply'
      replyUserId: null,
      parentId: null,
      parentNickname: '', // 一级回复的昵称
      targetNickname: '' // 被回复者的昵称
    })

    onMounted(() => {
      fetchPostDetail()
      fetchReplyList()

      // 添加滚动事件监听
      nextTick(() => {
        if (replyListContainer.value) {
          replyListContainer.value.addEventListener('scroll', handleScroll)
        }
      })
    })

    const fetchPostDetail = async () => {
      try {
        const response = await apiClient.get('/community/postDetail', {
          params: {
            postId: props.postId
          }
        })

        if (response.data.code === '200') {
          postDetail.value = response.data.data
        } else {
          console.error('获取帖子详情失败:', response.data.msg)
        }
      } catch (error) {
        console.error('请求帖子详情出错:', error)
      }
    }

    const fetchReplyList = async (isLoadMore = false) => {
    // 如果是加载更多且已经没有更多数据，则直接返回
      if (isLoadMore && noMoreData.value) return

      try {
      // 设置加载状态
        if (isLoadMore) {
          loadingMore.value = true
        }

        const params = {
          postId: props.postId,
          offset: isLoadMore ? replyList.value.length : 0
        }

        const response = await apiClient.post('/community/postDetail/replyList', params)

        if (response.data.code === '200') {
          const newReplies = response.data.data.map(reply => ({
            ...reply,
            subReplies: [] // 初始化子回复数组
          }))

          if (isLoadMore) {
          // 如果是加载更多，将新数据追加到现有数据后面
            if (newReplies.length > 0) {
              replyList.value = [...replyList.value, ...newReplies]
            } else {
            // 如果没有更多数据，设置标志位
              noMoreData.value = true
            }
          } else {
          // 如果是刷新数据，直接替换
            replyList.value = newReplies
            noMoreData.value = false // 重置无更多数据标志
          }

          // 为每个回复加载子回复
          for (const reply of replyList.value) {
            if (reply.replyCount > 0) {
              await fetchSubReplies(reply)
            }
          }
        } else {
          console.error('获取回复列表失败:', response.data.msg)
        }
      } catch (error) {
        console.error('请求回复列表出错:', error)
      } finally {
        if (isLoadMore) {
          loadingMore.value = false
        }
      }
    }

    // 获取回复的子回复
    const fetchSubReplies = async (reply) => {
      try {
        const params = {
          parentId: reply.replyId,
          offset: 0 // 初始加载前几个子回复
        }

        const response = await apiClient.post('/community/postDetail/replyReplyList', params)

        if (response.data.code === '200') {
          reply.subReplies = response.data.data
        } else {
          console.error('获取子回复列表失败:', response.data.msg)
        }
      } catch (error) {
        console.error('请求子回复列表出错:', error)
      }
    }

    // 加载更多子回复
    const loadMoreSubReplies = async (reply) => {
      try {
        const params = {
          parentId: reply.replyId,
          offset: reply.subReplies.length
        }

        const response = await apiClient.post('/community/postDetail/replyReplyList', params)

        if (response.data.code === '200') {
          reply.subReplies = [...reply.subReplies, ...response.data.data]
        } else {
          console.error('获取更多子回复失败:', response.data.msg)
        }
      } catch (error) {
        console.error('请求更多子回复出错:', error)
      }
    }

    const formatUpdateTime = (updateTime) => {
      const date = new Date(updateTime)
      const now = new Date()
      const diffTime = Math.abs(now - date)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))

      if (diffDays === 1) {
        return '今天'
      } else if (diffDays === 2) {
        return '昨天'
      } else if (diffDays <= 7) {
        return `${diffDays - 1}天前`
      } else {
        return date.toLocaleDateString('zh-CN')
      }
    }

    const handleLike = async () => {
      try {
        let reactionType
        if (postDetail.value.reactionType === 'like') {
          reactionType = 'cancelLike'
        } else if (postDetail.value.reactionType === 'dislike') {
          reactionType = 'dislike->like'
        } else {
          reactionType = 'like'
        }

        const response = await apiClient.post('/community/reaction', {
          postId: postDetail.value.postId,
          reactionType
        })

        if (response.data.code === '200') {
          if (postDetail.value.reactionType === 'like') {
            postDetail.value.likeCount--
            postDetail.value.reactionType = null
          } else if (postDetail.value.reactionType === 'dislike') {
            postDetail.value.likeCount++
            postDetail.value.reactionType = 'like'
          } else {
            postDetail.value.likeCount++
            postDetail.value.reactionType = 'like'
          }
        }
      } catch (error) {
        console.error('点赞操作失败:', error)
      }
    }

    const handleDislike = async () => {
      try {
        let reactionType
        if (postDetail.value.reactionType === 'dislike') {
          reactionType = 'cancelDislike'
        } else if (postDetail.value.reactionType === 'like') {
          reactionType = 'like->dislike'
        } else {
          reactionType = 'dislike'
        }

        const response = await apiClient.post('/community/reaction', {
          postId: postDetail.value.postId,
          reactionType
        })

        if (response.data.code === '200') {
          if (postDetail.value.reactionType === 'dislike') {
            postDetail.value.reactionType = null
          } else if (postDetail.value.reactionType === 'like') {
            postDetail.value.likeCount--
            postDetail.value.reactionType = 'dislike'
          } else {
            postDetail.value.reactionType = 'dislike'
          }
        }
      } catch (error) {
        console.error('点踩操作失败:', error)
      }
    }

    const handleFavorite = async () => {
      try {
      // 根据当前状态决定要发送的 reactionType
        const reactionType = postDetail.value.isFavourite ? 'cancel' : 'favorite'

        const response = await apiClient.post('/community/favorite', {
          postId: postDetail.value.postId,
          reactionType
        })

        if (response.data.code === '200') {
          if (postDetail.value.isFavourite) {
            postDetail.value.favouriteCount--
            postDetail.value.isFavourite = false
          } else {
            postDetail.value.favouriteCount++
            postDetail.value.isFavourite = true
          }
        }
      } catch (error) {
        console.error('收藏操作失败:', error)
      }
    }

    const handleReplyLike = async (reply) => {
      try {
        let reactionType
        if (reply.reactionType === 'like') {
          reactionType = 'cancelLike'
        } else if (reply.reactionType === 'dislike') {
          reactionType = 'dislike->like'
        } else {
          reactionType = 'like'
        }

        const response = await apiClient.post('/community/reaction', {
          replyId: reply.replyId,
          reactionType
        })

        if (response.data.code === '200') {
          if (reply.reactionType === 'like') {
            reply.likeCount--
            reply.reactionType = null
          } else if (reply.reactionType === 'dislike') {
            reply.likeCount++
            reply.reactionType = 'like'
          } else {
            reply.likeCount++
            reply.reactionType = 'like'
          }
        }
      } catch (error) {
        console.error('回复点赞操作失败:', error)
      }
    }

    const handleReplyDislike = async (reply) => {
      try {
        let reactionType
        if (reply.reactionType === 'dislike') {
          reactionType = 'cancelDislike'
        } else if (reply.reactionType === 'like') {
          reactionType = 'like->dislike'
        } else {
          reactionType = 'dislike'
        }

        const response = await apiClient.post('/community/reaction', {
          replyId: reply.replyId,
          reactionType
        })

        if (response.data.code === '200') {
          if (reply.reactionType === 'dislike') {
            reply.reactionType = null
          } else if (reply.reactionType === 'like') {
            reply.likeCount--
            reply.reactionType = 'dislike'
          } else {
            reply.reactionType = 'dislike'
          }
        }
      } catch (error) {
        console.error('回复点踩操作失败:', error)
      }
    }

    // 子回复点赞
    const handleSubReplyLike = async (subReply) => {
      try {
        let reactionType
        if (subReply.reactionType === 'like') {
          reactionType = 'cancelLike'
        } else if (subReply.reactionType === 'dislike') {
          reactionType = 'dislike->like'
        } else {
          reactionType = 'like'
        }

        const response = await apiClient.post('/community/reaction', {
          replyId: subReply.replyId,
          reactionType
        })

        if (response.data.code === '200') {
          if (subReply.reactionType === 'like') {
            subReply.likeCount--
            subReply.reactionType = null
          } else if (subReply.reactionType === 'dislike') {
            subReply.likeCount++
            subReply.reactionType = 'like'
          } else {
            subReply.likeCount++
            subReply.reactionType = 'like'
          }
        }
      } catch (error) {
        console.error('子回复点赞操作失败:', error)
      }
    }

    // 子回复点踩
    const handleSubReplyDislike = async (subReply) => {
      try {
        let reactionType
        if (subReply.reactionType === 'dislike') {
          reactionType = 'cancelDislike'
        } else if (subReply.reactionType === 'like') {
          reactionType = 'like->dislike'
        } else {
          reactionType = 'dislike'
        }

        const response = await apiClient.post('/community/reaction', {
          replyId: subReply.replyId,
          reactionType
        })

        if (response.data.code === '200') {
          if (subReply.reactionType === 'dislike') {
            subReply.reactionType = null
          } else if (subReply.reactionType === 'like') {
            subReply.likeCount--
            subReply.reactionType = 'dislike'
          } else {
            subReply.reactionType = 'dislike'
          }
        }
      } catch (error) {
        console.error('子回复点踩操作失败:', error)
      }
    }

    // 回复帖子
    const replyToPost = () => {
      replyContent.value = ''
      currentReplyTarget.value.type = 'post'
      currentReplyTarget.value.replyUserId = null
      currentReplyTarget.value.parentId = null
      currentReplyTarget.value.parentNickname = ''
      currentReplyTarget.value.targetNickname = ''
    }

    // 回复一级回复
    const replyToReply = (reply) => {
      replyContent.value = ''
      currentReplyTarget.value.type = 'reply'
      currentReplyTarget.value.replyUserId = null
      currentReplyTarget.value.parentId = reply.replyId
      currentReplyTarget.value.parentNickname = reply.nickname
      currentReplyTarget.value.targetNickname = ''
    }

    // 回复子回复
    const replyToSubReply = (parentReply, subReply) => {
      replyContent.value = `@${subReply.nickname} `
      currentReplyTarget.value.type = 'subReply'
      currentReplyTarget.value.replyUserId = subReply.userId
      currentReplyTarget.value.parentId = parentReply.replyId
      currentReplyTarget.value.parentNickname = parentReply.nickname
      currentReplyTarget.value.targetNickname = subReply.nickname
    }

    // 取消回复
    const cancelReply = () => {
      replyContent.value = ''
      currentReplyTarget.value.type = ''
      currentReplyTarget.value.replyUserId = null
      currentReplyTarget.value.parentId = null
      currentReplyTarget.value.parentNickname = ''
      currentReplyTarget.value.targetNickname = ''
    }

    const submitReply = async () => {
      if (!replyContent.value.trim()) return

      try {
      // 构建请求参数
        const requestData = {
          postId: postDetail.value.postId,
          content: replyContent.value // 这里先保留原始内容
        }

        // 根据回复类型添加相应参数
        if (currentReplyTarget.value.type === 'reply') {
          requestData.parentId = currentReplyTarget.value.parentId
        } else if (currentReplyTarget.value.type === 'subReply') {
          requestData.parentId = currentReplyTarget.value.parentId
          requestData.replyUserId = currentReplyTarget.value.replyUserId
        }

        // 如果当前是回复某个用户（即有 @），则去除开头的 @xxx
        if (currentReplyTarget.value.targetNickname &&
      replyContent.value.startsWith(`@${currentReplyTarget.value.targetNickname}`)) {
          requestData.content = replyContent.value.substring(`@${currentReplyTarget.value.targetNickname}`.length).trim()
        }

        const response = await apiClient.post('/community/sendReply', requestData)

        if (response.data.code === '200') {
        // 清空输入框和回复目标信息
          replyContent.value = ''
          currentReplyTarget.value.type = ''
          // ... 其他重置逻辑
          fetchReplyList()
        } else {
          console.error('回复失败:', response.data.msg)
        }
      } catch (error) {
        console.error('提交回复出错:', error)
      }
    }

    const handleImageError = (e) => {
      e.target.src = 'https://photo.fanya.chaoxing.com/photo_80.jpg'
    }

    // 处理滚动事件
    const handleScroll = () => {
      if (!replyListContainer.value || loadingMore.value || noMoreData.value) return

      const { scrollTop, scrollHeight, clientHeight } = replyListContainer.value
      // 当滚动到底部附近时加载更多
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        fetchReplyList(true) // 加载更多数据
      }
    }

    return {
      postDetail,
      replyList,
      replyContent,
      replyListContainer,
      loadingMore,
      noMoreData,
      currentReplyTarget,
      formatUpdateTime,
      handleLike,
      handleDislike,
      handleFavorite,
      handleReplyLike,
      handleReplyDislike,
      handleSubReplyLike,
      handleSubReplyDislike,
      replyToPost,
      replyToReply,
      replyToSubReply,
      cancelReply,
      submitReply,
      loadMoreSubReplies,
      handleImageError,
      handleScroll
    }
  }
}
</script>

<style scoped>
@import '//at.alicdn.com/t/c/font_5004955_4kt128cmqdu.css';

#app {
  background: linear-gradient(to right, #e0f7fa, #ffffff);
  min-height: 100vh;
  padding: 20px;
}

.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post-detail {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.post-author {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.author-avatar.small {
  width: 30px;
  height: 30px;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

.post-time {
  font-size: 14px;
  color: #999;
}

.post-content {
  margin-bottom: 20px;
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.post-category {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 10px;
}

.post-title {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.post-text {
  color: #666;
  line-height: 1.6;
  font-size: 16px;
  white-space: pre-wrap;
  text-align: left;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.attachment-item {
  flex: 1 1 auto;
  min-width: 150px;
  max-width: 200px;
}

.attachment-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-interactions {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.interaction-item {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.interaction-item:hover {
  color: #1890ff;
}

.interaction-item.active {
  color: #1890ff;
}

.interaction-item.like.active {
  color: #ff4d4f;
}

.interaction-item.dislike.active {
  color: #1890ff;
}

.interaction-item.favorite.active {
  color: #ffcc00;
}

.reply-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reply-item {
  padding: 15px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fafafa;
}

.reply-author {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reply-author .author-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.reply-author .author-name {
  font-size: 14px;
}

.reply-author .reply-time {
  font-size: 12px;
  color: #999;
}

.reply-content {
  margin-bottom: 10px;
  color: #333;
  line-height: 1.5;
  text-align: left;
}

.reply-to {
  color: #1890ff;
  font-weight: 500;
  margin-right: 5px;
}

.reply-interactions {
  display: flex;
  gap: 15px;
}

.sub-replies {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #e8e8e8;
}

.sub-reply-item {
  padding: 10px 0;
  border-bottom: 1px dashed #e8e8e8;
}

.sub-reply-item:last-child {
  border-bottom: none;
}

.load-more-sub-replies {
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 0;
  text-align: center;
}

.load-more-sub-replies:hover {
  text-decoration: underline;
}

/* 回复目标信息显示 */
.reply-target-info {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #1890ff;
}

.cancel-reply {
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}

.cancel-reply:hover {
  background-color: #ff7875;
}

.reply-input-container {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.reply-input {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.reply-input:focus {
  border-color: #1890ff;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.reply-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.reply-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: 1px solid #1890ff;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.reply-btn:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.reply-btn:disabled {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #999;
}

.loading-more,
.no-more-data {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-container {
    padding: 10px;
  }

  .post-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .post-category {
    margin-bottom: 10px;
  }

  .post-interactions,
  .reply-interactions {
    justify-content: space-around;
  }

  .attachments {
    flex-direction: column;
  }

  .attachment-item {
    min-width: 100%;
  }

  .sub-replies {
    padding-left: 10px;
  }
}
</style>
